import React, { useState, useContext } from "react";
import './index.css'

const titleArr = ["light", "dark"]
const themes = {
    light: {
        background: "white",
        color: "green"
    },
    dark: {
        background: "black",
        color: "red"
    }
}

const ThemesContext = React.createContext(themes);

const Theme = () => {
    const [theme,setTheme] = useState(themes.dark)
    const changeTheme = (index) => {
        setTheme(index === 0 ? themes.light : themes.dark)
        console.log('1 ',theme)
    }
    return (
        <ThemesContext.Provider value={{theme, changeTheme}}>
            <ThemeChild />
        </ThemesContext.Provider>
    )
}

const ThemeChild = () => {
    const { theme, changeTheme } = useContext(ThemesContext)
    const [title, setTitle] = useState(0);
    const handleChange = (index) => {
        setTitle(index);
        changeTheme(index);
        console.log('2',theme)
    }
    return (
        <div className="box" style={{background: theme.background}}>
            {titleArr.map((item,index) => {
                return (
                    <div
                        key={index}
                        className={index === title ? 'light' : 'dark'}
                        onClick={() => handleChange(index)}
                    >
                        {item}
                    </div>
                )
            })}
        </div>
    )
}

export default Theme;